import React, { useState } from 'react';
import { Layout, Tabs, TabPanel } from 'tea-component';
import { Basic } from './Basic';
import { Transaction } from './Transaction';
import { Bread } from '@src/components/common-compinents';

const bread = Bread;
const { Content } = Layout;

export function BlockDetail(props) {
  const { history } = props;
  const tabs = [
    { id: 'basic', label: '基本信息' },
    { id: 'transaction', label: '交易信息' },
  ];

  const [tabsSelect, setTabsSelect] = useState('basic');

  return (
    <Content>
      <Content.Header
        showBackButton
        onBackButtonClick={() => {
          history.goBack();
        }}
        title={bread('区块链浏览器/区块列表/区块详情')}
      />
      <Content.Body>
        <div
          style={{
            width: '1000px',
            boxSizing: 'border-box',
            margin: '0px auto',
            display: 'flex',
            padding: '0px 10px',
          }}
        >
          <Tabs
            tabs={tabs}
            activeId={tabsSelect}
            onActive={(value) => {
              setTabsSelect(value.id);
            }}
            className="block-detail-tabs"
            style={{
              width: '100%',
            }}
          >
            <TabPanel id="basic">
              <Basic></Basic>
            </TabPanel>
            <TabPanel id="transaction">
              <Transaction></Transaction>
            </TabPanel>
          </Tabs>
        </div>
      </Content.Body>
    </Content>
  );
}
